<template>
  <li class="money-item">
    <span class="time">{{value.deal_time}}</span>
    <span class="content">{{value.desc}}</span>
    <span class="info" :style="changeColor(value.result)">{{value.result}}</span>
  </li>
</template>

<script>
export default {

  name: 'moneyItem',
  data() {
    return {

    };
  },
  props: {
    value: {
      type: Object
    }
  },
  created() {
    this.changeColor('-10')
  },
  methods: {
    changeColor(text) {
      return text.slice(0, 1) === '-' ? 'color:#f00;' : text.slice(0, 1) === '+' ? 'color:#00A2EA;' : 'color:#ccc'
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.money-item{
  line-height: 40px;
  .time{
    float: left;
    color: #999;
  }
  .content{
     margin-left: 200px;
     color: #999;
  }
  .info{
    float: right;
    color: #00A2EA;
  }
}
</style>